<!DOCTYPE html>
<html>
	<head>
		<style>
			table{
				border:medium solid #6495ed;
				border-collapse:collapse;
				width:50%;
			}
			th{
				font-family:monospace;
				border:thin solid #6495ed;
				width:50%;
				padding:5px;
				background-color:#D0E3FA;
				background-image:url(sky.jpg);
			}
			td{
				font-family:sans-serif;
				border:thin solid #6495ed;
				width:50%;
				padding:5px;
				text-align:center;
				background-color:#ffffff;
			}
			caption{
				font-family:sans-serif;
			}

		</style>
	</head>
<body>
	<TABLE>
	<tr> 
		<td><input type="button" value="Facile" onclick="function1('case1')"></td>
		<td id="case1"></td>
	</tr>

	<tr>	
		<td><input type="button" value="Difficile" onclick="function2('case2')"></td>
		<td id="case2"></td>
	</tr>

	<tr>	
		<td><input type="button" value="Alterner"  onclick="function3('case3')"></td>
		<td id="case3"></td>
	</tr>
	</table>
<script>
	const M1 = "Examen facile!";
	const M2 = "Examen difficile!";

	//affiche M1 dans "case1" au clique de "Facile". //(1 point)
	function function1(cell) {
		document.getElementById(cell).textContent = M1;  
	}

	// affiche M2 dans "case2" en "rouge" au clique de "Difficile". (2 points)
	
	function function2(cell) {
		let element = document.getElementById(cell); 
		
		element.textContent = M2; 
		element.style.color = "red";
	}

	// Alterne l'affichage dans "case3" de M1 en "noir" et M2 en "rouge" 
	// au clique de "Alterner". (3 points)
	function function3(cell) {
		let element = document.getElementById(cell);									
		if (element.textContent == M1)
		{
			function2(cell);
		}
		else
		{
			function1(cell);
			element.style.color = "black";
		}
	}

</script>

</body>
</html>
